<template>
  <div class="choice">
    <el-form-item>
      <el-radio
        v-for="item in radio2List"
        :key="item"
        v-model="radio2"
        :label="item"
        @change="handleChoiceChange"
        border
      ></el-radio>
    </el-form-item>
    <el-checkbox-group v-model="form.answer" @change="handleAnswerChange">
      <el-form-item
        v-for="(item, index) in form.options"
        :key="item.id"
        class="options"
        label-width="40px"
      >
        <el-checkbox :label="item.sign" v-show="value == '多选题'" />
        <el-radio
          size="mini"
          @change="handleAnswerChange"
          v-model="radio"
          v-show="value == '单选题'"
          :label="item.sign"
          >{{ item.sign }}</el-radio
        >
        <Editor
          class="editor"
          :isdanger="true"
          :main="item.content"
          :symbol="'options'"
          :optionsid="index"
          @editorchange="onEditorChange"
          @removeoption="removeoption"
        />
      </el-form-item>
    </el-checkbox-group>
    <el-form-item>
      <el-button type="primary" @click="addOption">添加选项</el-button>
    </el-form-item>
  </div>
</template>
<script>
import Editor from "../../../components/editor";
import { getQuestionById } from "./index";
export default {
  props: ["formData"],
  components: {
    Editor,
  },
  data() {
    return {
      // 单选多选
      value: "单选题",
      // 单选框绑定一个属性
      radio: "",
      radio2: "单选题",
      radio2List: ["单选题", "多选题"],
      form: {
        options: [{ id: 0, content: "", sign: "A" }],
        answer: [],
      },
      // 选项
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "R",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      checked: false,
      // 选项唯一值
      optionskey: 1,
    };
  },
  computed: {},
  activated() {},
  created() {
    this.getQuestionOne()
    this.optionskey = this.form.options.length;
    this.loadAnswer(this.form.answer);
    this.loadForm();
  },
  methods: {
    // 根据路由id获取试题
    getQuestionOne() {
      this.questionid = this.$route.query.id;
      if (this.questionid) {
        getQuestionById(this.questionid).then((res) => {
          this.form = res
        });
        console.log("子组件");
      }
    },
    // 加载form表单数据
    loadForm() {
      if (this.formData) {
        this.form = this.formData;
      }
    },
    // 加载答案
    loadAnswer(val) {
      if (val.length <= 1) {
        this.radio = val[0];
        this.radio2 = "单选题";
        this.value = "单选题";
      } else {
        this.radio2 = "多选题";
        this.value = "多选题";
      }
    },
    // 答案选项变化触发
    handleAnswerChange(val) {
      if (this.value === "单选题") {
        this.form.answer = [val];
      }
    },
    // 单选多选 change 触发
    handleChoiceChange(val) {
      this.value = val;
    },
    // 获取科目和章节 id
    getid(catalougeid, chapterid) {
      this.form.catalouge_id = catalougeid;
      this.form.chapter_id = chapterid;
      this.form.type_id = 1;
    },
    // 点击删除选项
    removeoption(id) {
      this.form.options.splice(id, 1);
      this.form.options.forEach((item, index) => {
        item.sign = this.letter[index];
      });
    },
    // 点击添加选项
    addOption() {
      if (this.form.options.length >= this.letter.length)
        return this.$message.info(
          `添加选项失败 最多可添加${this.letter.length}条`
        );
      this.optionskey++;
      const option = {
        sign: this.letter[this.form.options.length],
        content: "",
        isShow: true,
        id: this.optionskey,
      };
      this.form.options.push(option);
    },
    onEditorChange(e, s, id) {
      this.form.options[id].content = e;
    },
  },
};
</script>
<style lang='less'>
.options {
  .el-form-item__content {
    display: flex;
    .editor {
      flex: 1;
      margin-right: 20px;
    }
  }
}
</style>
